
$common-color:#6dd5ed;
$title-color:#FCFEFD;
$content-title-color:#FC980E;
$finish-color:#00FE0F;
$jihua-color:linear-gradient(#5ee7df, #b490ca);;
$wancheng-color: linear-gradient(#fa709a, #fee140);
$point-color: linear-gradient(#0250c5, #d43f8d);
$pointtext-color: gray;
html{
   width: 100%; 
    height: 100%; 
    background:#00065b;
    font-family: 微软雅黑, MicrosoftYahei, sans-serif;
    body{
        height: 100%;
        width: 100%;
       .main{ //主界面
           height: 100%;
           width: 100%;
           position: fixed;
           background-size: 100% 100%;
           
           .head{//头部
            margin-top: 8px;
            .company{
                color: #BB5E00;
                p{
                    text-align: center;
                    margin-top: 6%;
                    margin-left: 12%;
                    font-size: 1.2vw;
                    width: 115%;
                }
            }
               .title{
                   margin-left: 20%;
                   font-size: 2.4vw;
                   color:#00FFFF ;
               }
               .time{
                   color: #C4D6E9;
                   margin-left: 8%;
                   margin-top: 2%;
                   font-weight: 600;
                   font-size: 0.9vw
               }
               .buttons{
                   margin-top: 1.4%;
                   font-size: 1.1vw;
                   color: #BDCFE3;
                   i{
                    font-size: 1.8vw;
                    font-weight: 600;
                    color:$common-color;
                    display: inline-block;
                    position: relative;
                    top: 4px;
                   }
                   span{
                    cursor: pointer;
                   }
               }
           }
           .main-item1{
               margin-top: 0.2%;
               height: 46%;
               width: 100%;
               .contenTitle{
                margin-left: 38.5%;
                font-size: 1.3vw;
                margin-top: 1%;
                color: $content-title-color;
                border-top: 4px solid #F8E063;
                width: 25%;
                text-align: center;
            }    
               .rightContent{
                border: 3px solid $common-color;
                width: 48.7%;
                height: 44.5%;
                position: fixed;
                margin-left: 1%;
                .title{
                    margin-left: 40%;
                    width: 20%;
                    font-size: 1.6vw;
                    margin-bottom: 0.5%;
                    color: $title-color;
                    
                }
                .qualityManage{
                    height: 39%;
                    width: 48.4%;                  
                    position: fixed;
                    background-size: 100% 100%; 
                    .content{
                        height: 100%;
                        .qualityManageChart{
                            margin-top: 10%;
                            width: 90%;
                            height: 12.2vw;
                            div:nth-child(1){
                                height: 100%;
                                color: $title-color;
                                margin-right: 8px;
                                ul{
                                    height: 16%;
                                    position: relative;
                                    top:-20px;
                                    li{
                                        text-align: right;
                                        span{
                                            font-size: 0.4vw;
                                        }
                                    }

                                }
                            }
                            .zhuImage{
                                height: 100%;
                                border-bottom: 2px gray solid ;
                                margin-left: 5px;
                                p{
                                    position: absolute;
                                    top: -24px;
                                    text-align: center;
                                    width: 100%;                                       
                                }
                                .zhu1{
                                    position: relative;
                                     background: $jihua-color;
                                     
                                    
                                }
                                .point{
                                    position: relative;
                                    top: -15%;
                                    span{
                                        font-size: 0.2vw;
                                        color: gray;
                                    }
                                    .rateArea{
                                        position: relative;
                                        text-align: center;
                                    .finishrate{
                                        background: linear-gradient(#0250c5, #d43f8d);
                                        
                                        width: 11px;
                                        height: 11px;
                                        margin-left: 35%;  
                                        border-radius: 50%;
                                        
                                    }
                                }
                                }
                                .zhu2{
                                    background:$wancheng-color;
                                    position: relative;
                                }
                            }
                            div:nth-child(3){
                                height: 100%;
                                color: $title-color;
                                ul{
                                    position: relative;
                                    top:-20px;
                                    height: 16%;
                                    li{
                                        text-align: left;
                                        height: 20%px;
                                        span{
                                            font-size: 0.4vw;
                                        }
                                    }

                                }
                            }
                        }
                        .date{
                            color: $title-color;
                            font-size: 0.7vw;
                            margin-left: 40%;
                        }
                        .tags{
                            margin-top: 1%;
                            font-size: 0.5vw;
                            color: $title-color;
                            .el-button{
                                width: 11px;
                                height: 11px;
                                margin-right: 3px;
                            }
                            .will{
                                
                                background: linear-gradient(#5ee7df, #b490ca);
                            }
                            .finish{
                                background: linear-gradient(#fa709a, #fee140);
                            }
                            .finishrate{
                                background: linear-gradient(#0250c5, #d43f8d);
                            }
                        }
                        li{
                            list-style: none;
                        }
                        // 子类选择器
                        li:nth-child(1){
                           color: $title-color;
                           margin-left: 20% ;
                           margin-top: 10%;
                           margin-bottom: 5%;
                           font-size: 1.2vw;
                        }
                        li:nth-child(2){
                            margin-left: 30% ;
                            img{
                                width: 45%;
                                transform:rotate(30deg);
                            }
                        }
                        li:nth-child(3){
                            margin-left: 22% ;
                            color:$title-color;
                            font-size: 1vw;
                         }
                         li:nth-child(4){
                            color:$finish-color;
                            font-size: 0.9vw;
                            margin-left: 38% ;
                         }
                         li:nth-child(5){

                            margin-left: 30% ;
                            img{
                                width: 45%;
                                transform:rotate(30deg);
                            }
                         }
                         li:nth-child(6){
                            margin-left: 30% ;
                            color:$title-color;
                            font-size: 1vw;
                         }
                         li:nth-child(7){
                            color:$finish-color;
                            margin-left: 37% ;
                            font-size: 0.9vw;
                         }
                    }                            
                }   
               }
               .leftContent{
                border: 3px solid $common-color;
                width: 48.7%;
                height: 44.5%;
                position: fixed;
                margin-left: 50.2%;
                .recording{
                    height: 88%;
                    width: 100%;
                    background-size: 100% 100%;
                    .recordingManageChart{                       
                        width: 90%;
                        height: 12.2vw;
                        margin-top: 7.6%;
                        margin-left: 6%;
                        li{
                            list-style: none;
                        }
                        div:nth-child(1){
                            height: 100%;
                            color: $title-color;
                            margin-right: 8px;
                            ul{
                                height: 19.5%;
                                position: relative;
                                top:-8px;
                                li{
                                    text-align: right;
                                    span{
                                        font-size: 0.4vw;
                                    }
                                }

                            }
                        }
                        .zhuImage{
                            p{
                                position: absolute;
                                top: -24px;
                                text-align: center;
                                width: 100%;                                       
                            }
                            height: 100%;
                            border-bottom: 2px gray solid ;
                            margin-left: 5px;
                            .zhu1{
                                position: relative;
                                 background: $jihua-color;
                                
                            }
                            .point{
                                position: relative;
                                top:-14%;
                                span{
                                    font-size: 0.2vw;
                                    color: gray;
                                }
                                .rateArea{
                                    position: relative;
                                text-align: center;
                                .finishrate{
                                    background: linear-gradient(#0250c5, #d43f8d);
                                    width: 11px;
                                    height: 11px;
                                    margin-left: 40%;  
                                    border-radius: 50%;
                                }
                            }
                            }
                            .zhu2{
                                background:$wancheng-color;
                                position: relative;
                            }
                            .zhu3{
                                position: relative;
                                background: linear-gradient(#b224ef, #7579ff);
                            }
                            
                        }
                        div:nth-child(3){
                            height: 100%;
                            color: $title-color;
                            
                            ul{
                                height: 19.5%;
                                position: relative;
                                top:-8px;
                                margin-left: 10px;
                                li{
                                    text-align: left;
                                    height: 20%px;
                                    span{
                                        font-size: 0.4vw;
                                    }
                                }

                            }
                        }
                    }
                }
                .title{
                    margin-bottom: 0.5%;
                    margin-left: 40%;
                    font-size: 1.6vw;
                    color: $title-color;
                }
                .tags{
                    width: 80%;
                    font-size: 0.5vw;
                    margin-top: 2%;
                    color: $title-color;
                    .el-button{
                        width: 11px;
                        height: 11px;
                        margin-right: 3px;
                    }
                    .will{
                        background: linear-gradient(#5ee7df, #b490ca);
                        margin-left: 27%;
                    }
                    .finish{
                        background: linear-gradient(#fa709a, #fee140);
                    }
                    .finishrate{
                        border-radius: 50%;
                        background: linear-gradient(#0250c5, #d43f8d);
                    }
                    .jiankong{
                        background: linear-gradient(#b224ef, #7579ff);
                    }
                }
               }
            
           }
           .main-item2{
            border: 1px  solid $common-color;
            border-right: 5px solid $common-color;
            border-left: 5px solid $common-color;
            height: 45.8%;
            width: 98%;
            margin-left: 1%;
            
            .title{
                margin-left: 44.4%;
                font-size: 1.6vw;
                margin-bottom: 0.5%;
                color: $title-color;
            }
            .mainContent{
                .contenTitle{
                    margin-left: 38.5%;
                    font-size: 1.3vw;
                    margin-top: 1%;
                    color: $content-title-color;
                    border-top: 5px solid #F8E063;
                    width: 25%;
                    text-align: center;
                }    
                .content{
                    border: 1px solid $common-color;
                    width: 32.5%;
                    height: 39%;
                    position: fixed;
                  }
                        .qualityManageChart{
                            margin-top: 10%;
                            width: 90%;
                            height: 12.2vw;
                            div:nth-child(1){
                                height: 100%;
                                color: $title-color;
                                margin-right: 8px;
                                ul{
                                    height: 19.5%;
                                position: relative;
                                top:-8px;
                                    li{
                                        text-align: right;
                                        span{
                                            font-size: 0.4vw;
                                        }
                                    }

                                }
                            }
                            .zhuImage{
                                p{
                                    position: absolute;
                                    top: -24px;
                                    text-align: center;
                                    width: 100%;                                       
                                }
                                height: 100%;
                                border-bottom: 2px gray solid ;
                                margin-left: 5px;
                                .zhu1{
                                    position: relative;
                                     background: $jihua-color;
                                    
                                }
                                .point{
                                    position: relative;
                                    top: -14%;
                                    span{
                                        font-size: 0.2vw;
                                        color: gray;
                                    }
                                    .rateArea{
                                        position: relative;
                                        text-align: center;
                                    .finishrate{
                                        background: linear-gradient(#0250c5, #d43f8d);
                                        width: 11px;
                                        height: 11px;
                                        margin-left: 40%;  
                                        border-radius: 50%;
                                    }
                                }
                                }
                                .zhu2{
                                    background:$wancheng-color;
                                    position: relative;
                                }
                            }
                            div:nth-child(3){
                                height: 100%;
                                color: $title-color;
                                ul{
                                    height: 19.5%;
                                    position: relative;
                                    top:-8px;
                                    margin-left: 10px;
                                    li{
                                        text-align: left;
                                        height: 20%px;
                                        span{
                                            font-size: 0.4vw;
                                        }
                                    }

                                }
                            }
                        }
                        .date{
                            color: $title-color;
                            font-size: 0.7vw;
                            margin-left: 40%;
                        }
                        .tags{
                            margin-top: 1%;
                            font-size: 0.5vw;
                            width: 80%;
                            color: $title-color;
                            .el-button{
                                width: 11px;
                                height: 11px;
                                margin-right: 3px;
                            }
                            .will{
                                background: linear-gradient(#5ee7df, #b490ca);
                            }
                            .finish{
                                background: linear-gradient(#fa709a, #fee140);
                                margin-left: 5px;
                            }
                            .finishrate{
                                background: linear-gradient(#0250c5, #d43f8d);
                                margin-left: 5px;
                            }
                        }
                        li{
                            list-style: none;
                        }
                                               
                   
               .leftItem{
                  .item-title{
                    margin-left: 44.4%;
                    font-size: 1.3vw;
                    margin-bottom: 0.5%;
                    color: $title-color;
                  }
                  
                  
               }
               .rightItem{
                .item-title{
                    margin-left: 44.4%;
                    font-size: 1.3vw;
                    margin-bottom: 0.5%;
                    color: $title-color;
                  }
                 
               }
               .midItem{
                .item-title{
                    margin-left: 40%;
                    font-size: 1.3vw;
                    margin-bottom: 0.5%;
                    color: $title-color;
                  }
                  
               }
            }
           }
       }
    }
}
*{
    margin: 0;
    padding: 0;
}